<template>
  <div>
    <h1 ref="h1">模板引用</h1>
    <hr />
    <!-- 表单组件 -->
    <!-- <ElForm></ElForm> -->
    <el-form ref="fm"></el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ElForm from './form.vue'
/**
 * 模板引用
 * 场景：
 * 1. 获取 html元素 dom 对象
 * 2. 获取自定义组件实例=》el-form=> $refs.fm.validate()
 * 步骤：
 * 1. 定义一个 ref 的响应变量
 * 2. 元素身上绑定：ref="变量名"
 * 3. 组件加载后通过：变量名.value 获取dom元素/组件实例
 * !注意：元素身上绑定ref 值必须和定义的响应变量名一致
 */
// 获取 html元素 dom 对象
const h1 = ref(null)
console.log('获取h1dom 对象1：', h1.value)
// 获取自定义组件实例
const fm = ref(null)

onMounted(() => {
  console.log('获取h1dom 对象2：', h1.value)
  console.log('获取表单组件实例：', fm.value)
  h1.value.style.border = '2px solid red'
  // 调用表单实例中方法
  console.log(fm.value.msg)
  fm.value.validate()
})
</script>

<style lang="scss" scoped></style>
